<template>
  <section style="min-width:1300px">

    <enHeader :bannerShow="0"></enHeader>
    <div class="container">
      <div class="r">
        <enBread ref="mychild"
                 :books="books"></enBread>
        <div class="common0"
             v-if="!!articleId&&articleId!=10000">
          <p class="textTitle">{{articleTitle}}</p>
          <div class="ql-snow ql-editor"
               v-html="articleDetail"></div>
        </div>
        <div class="common1"
             v-if="articleId==10000">
          <el-table :data="rateList"
                    border
                    style="width: 100%;margin-top:30px">
            <el-table-column prop="curreny"
                             align="center"
                             label="Currency">
            </el-table-column>
            <el-table-column prop="caBankBuy"
                             label="Bank Buys/CA"
                             align="center"
                             width="199">
            </el-table-column>
            <el-table-column prop="caBankSell"
                             width="199"
                             align="center"
                             label="Bank Sells/CA">
            </el-table-column>
            <el-table-column prop="ttBankBuy"
                             align="center"
                             label="Bank Buys/TT">
            </el-table-column>
            <el-table-column prop="ttBankSell"
                             align="center"
                             label="Bank Sells/TT">
            </el-table-column>
            <el-table-column prop="updateTime"
                             align="center"
                             label="Update Time">
            </el-table-column>
          </el-table>
          <el-pagination @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page.sync="pageSize"
                         :page-size="10"
                         class="pagination"
                         layout="prev, pager, next, jumper"
                         :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
    <enFooter></enFooter>
  </section>
</template>

<script>
import { Table, TableColumn, Pagination } from 'element-ui'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  name: "articles",
  data () {
    return {
      articleTitle: "",
      articleDetail: "",
      articleId: "",
      rateList: [],
      pageSize: 1,
      total: 0,
      books: ""
    };
  },

  watch: {
    $route (v, vv) {
      this.commonQuery(v)
    }
  },
  components: {
    elTable: Table,
    elTableColumn: TableColumn,
    elPagination: Pagination,
  },

  created () {
    this.commonQuery(this.$route)
  },
  methods: {
    handleSizeChange () {

    },
    commonQuery (v) {
      let { articleId } = v;
      this.articleId = v.query.articleId;
      if (this.articleId && this.articleId != 10000) {
        this.articleDetailDo(this.articleId)
      } else if (this.articleId == 10000) {
        this.books = "RLB Exchange Rates"
        this.rate()
      }
    },
    rate () {
      let self = this
      Driver.proxy(
        "api",
        {
          apiPath: apiConfig.member.getRateList,
          mode: "post",
          data: {
            nextPageNo: this.pageSize
          }
        },
        function (suc) {
          self.rateList = suc.data.result
          self.total = suc.data.total
        },
        function (err) {

        }
      );
    },
    handleCurrentChange (v) {
      this.pageSize = v
      this.rate()
    },
    articleDetailDo (v) {
      let self = this
      Driver.proxy(
        "api",
        {
          apiPath: apiConfig.member.articleDetail,
          mode: "post",
          data: {
            id: v
          }
        },
        function (suc) {
          self.articleDetail = suc.data.content;
          self.articleTitle = suc.data.title;

        },
        function (err) {

        }
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.pointer {
  cursor: pointer;
}
.common0,
.common1 {
  .textTitle {
    font-size: 20px;
    text-align: center;
    margin: 20px;
  }
}
.jobactive {
  color: #850c0c;
}
.container {
  width: 1300px;
  margin: 0 auto;
  overflow-x: hidden;
  display: flex;
  margin-top: 20px;
  min-height: 600px;
}
.r {
  flex: 1;
  .pagination {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
  }
}
.list {
  width: 100%;
  min-height: 500px;
  margin-top: 30px;
  ul {
    width: 420px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    font-size: 16px;
    margin-bottom: 20px;
    font-weight: 600;
    li {
      cursor: pointer;
    }
  }
}
</style>
<style lang="scss" >
.list2 tr th:first-of-type div {
  text-align: center !important;
}
.list2 td div,
.list td div {
  padding-left: 30px !important;
  cursor: pointer;
}
.r {
  th {
    background: #f3e6e6;
    color: black;
  }
  .el-pager {
    .active {
      color: #850c0c;
    }
  }
}
.list {
  tbody {
    .el-table__row .cell {
      font-size: 14px;
    }
  }
}
</style>